<template>
  <div id="app">
    <div class="navbox" v-if="$route.path !== '/'">
      <div class="leftlogo">
        <div class="imgbox">
          <img src="http://mengxuegu.com:9999/img/logo.7156be27.png" />
        </div>
        <div class="logotitle">积云信息管理系统</div>
      </div>
      <div class="userInfo">
        <span @click="akflag">{{ username }}</span>
      <transition name="fade">
          <div v-if="seleboxflag" class="flag">
          <span>更改密码</span>
          <span @click="removelogin">退出登录</span>
        </div>
      </transition>
      </div>
    </div>
    <div class="boxleft" v-if="$route.path !== '/'">
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router>


        <el-menu-item index="/leteuser/index">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/leteuser/member">
          <i class="el-icon-menu"></i>
          <span slot="title">会员列表</span>
        </el-menu-item>
        <el-menu-item index="/leteuser/supplier">
          <i class="el-icon-menu"></i>
          <span slot="title">供应商管理</span>
        </el-menu-item>

        <el-menu-item index="/leteuser/goods">
          <i class="el-icon-setting"></i>
          <span slot="title">商品管理</span>
        </el-menu-item>
        <el-menu-item index="/leteuser/staff">
          <i class="el-icon-setting"></i>
          <span slot="title">员工管理</span>
        </el-menu-item>
      </el-menu>



    </div>
    <div :class="$route.path !== '/' ?'content':'app'" >
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      seleboxflag:false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);

    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    akflag(){
      this.seleboxflag = !this.seleboxflag
    },
    removelogin(){
      localStorage.removeItem('token')
      this.$router.push('/')
    }
  },
  updated() {
    setTimeout(() => {
      this.username = localStorage.getItem("username");
    }, 500);
  },
};
</script>

<style lang="scss">
#app,
body,
html {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  .navbox {
    width: 100%;
    height: 50px;
    background-color: #343a40;
    padding: 0 80px;
    box-sizing: border-box;
    .leftlogo {
      height: 100%;
      float: left;
      .imgbox {
        width: 50px;
        height: 100%;
        position: relative;
        float: left;
        img {
          width: 75%;
          height: 75%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .logotitle {
        height: 100%;
        line-height: 50px;
        color: white;
        font-size: 20px;
        float: left;
      }
    }
    .userInfo {
      float: right;
      line-height: 50px;
      position: relative;
      span {
        color: white;
      }
      .flag{
        position: absolute;
        top: 50px;
        width: 100px;
        height: 100px;
        left: -100%;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        span{
          width: 100%;
          height: 40px;
          border: 1px solid #ccc;
          background-color: #666;
          line-height: 40px;
          font-size: 15px;
          text-align: center;
          color: white;
        }
      }
    }
  }
  .boxleft {
    width: 260px;
    height: 90vh;
    border-right: 1px solid #ccc;
    float: left;
  }
  .content {
    width: calc(100% - 260px);
    height: calc(100vh - 60px);
    float: right;
    position: absolute;
    right: 0;
    top: 50px;
  }
}
   .fade-enter-active, .fade-leave-active {
  transition: all .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(100%);
  z-index:-1;
  }
  .app{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
  }
</style>
